<template>
	<view>
		<view class="cu-modal" :class="{show: !hasLogin}">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{$t("登录")}}</view>
				</view>
				<form @submit="login">
					<view class="padding-xl">
						<view class="cu-form-group margin-top">
							<view>{{$t("账号")}}</view>
							<input v-model="loginPage.input.username" :placeholder="$t('请输入账号')" name="username"></input>
						</view>
						<view class="cu-form-group">
							<view>{{$t("密码")}}</view>
							<input v-model="loginPage.input.password" :placeholder="$t('请输入密码')" type="password" name="password"></input>
						</view>
						<view class="cu-form-group" v-show="loginPage.needValid">
							<view>
								<image @tap.stop="getLastCode" style="width:100px;height:28px" :src="loginPage.validCodeUrl" mode="aspectFit"></image>
							</view>
							<input v-model="loginPage.input.validCode" :placeholder="$t('验证码')" type="input" name="validCode"></input>
						</view>

					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button form-type="submit" class="cu-btn margin-left text-white" :style="{backgroundColor:theme}">{{$t("登录")}}</button>
							<button class="cu-btn bg-gray margin-left" @tap.stop="cancel">{{$t("取消")}}</button>
						</view>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import graceChecker from '@/common/js/graceChecker.js'
	import DesUtils from '@/common/js/des.js'
	import Config from '@/common/js/config.js'
	

	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapState(["theme", "HOST_URL", "secretKey", "hasLogin", "loginPage"])
		},
		mounted() {
			this.autoLogin()
		},
		methods: {
			...mapMutations(["setSessionId", "setHasLogin", "setUser"]),
			...mapActions(["autoLogin", "startLogin", "getLastCode"]),
			cancel() {
				this.setHasLogin(true)
			},
			SetStorage(username, password) {
				uni.setStorage({
					key: Config.CATCH.USER_LOGIN_INFO,
					data: {
						username,
						password
					}
				});
			},
			login(e) {
				//定义表单规则
				var rule = [{
						name: "username",
						checkType: "notnull",
						checkRule: "",
						errorMsg: this.$t("请输入账号")
					},
					{
						name: "password",
						checkType: "notnull",
						checkRule: "",
						errorMsg: this.$t("请输入密码")
					}
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (!checkRes) {
					return uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
				let username = DesUtils.encode(formData.username, this.secretKey)
				let password = DesUtils.encode(formData.password, this.secretKey)
				// 缓存
				this.SetStorage(username, password)
				let validCode = DesUtils.encode(formData.validCode, this.secretKey)
				let __url = ""
				let __sid = this.loginPage.sid
				this.startLogin({
					username,
					password,
					validCode,
					__url,
					__sid
				})
			}
		}
	}
</script>

<style>
</style>
